<template>
  <div>
    <!-- 主体内容 -->
    <div class="container">
      <div v-for="(item, d_id) in dairyDetail" :key="d_id">
        <img class="bc_img" :src="item.d_img" />
        <div class="bottom">
          <div class="user_row">
            <img class="user_touxiang" :src="item.d_img" alt />
            <span class="user_name">{{ item.d_man_name }}</span>
          </div>
          <p class="detail">{{ item.d_detail }}</p>
          <p class="fabu_time">发布于{{ formatDate(item.d_time) }}</p>
        </div>
      </div>

      <div class="go_back" @click="Go_back">
        <img src="@/assets/img/jiyang/fanhui.png" alt />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["d_id"],
  data() {
    return {
      //存储日记信息
      dairyDetail: []
    };
  },
  methods: {
    getdairyDataByid() {
      this.http
        .get(`${this.$api.getDairyDetail}/${this.$route?.query?.d_id}`)
        .then(res => res.data)
        .then(res => {
          if (res.code == 200) {
            this.dairyDetail = res.data;
          }
        });
    },

    Go_back() {
      this.$router.go(-1);
    },
    formatDate(date) {
      return this.$moment(date).format("YYYY-MM-DD HH:mm:SS");
    }
  },
  mounted() {
    console.log("--------d_id:", this.d_id, this.$route?.query?.d_id);
    this.getdairyDataByid();
  }
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #000;
  color: #ffffff;
  font-size: 1.4rem;
  text-align: start;

  .go_back {
    width: 3.5rem;
    height: 3.5rem;
    box-sizing: border-box;
    background-color: rgba($color: #ffffff, $alpha: 0.7);
    position: fixed;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0.75rem;
    top: 2rem;
    left: 2rem;

    img {
      width: 2rem;
      height: 2rem;
    }
  }
  .bc_img {
    height: 100vh;
    width: 100vw;
    object-fit: scale-down;
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left: 2rem;
    .user_row {
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
      .user_touxiang {
        display: block;
        width: 3rem;
        height: 3rem;
        //裁减掉多余部分,不拉伸 不失真
        object-fit: cover;
        border-radius: 50%;
        background-color: white;
      }
      .user_name {
        margin-left: 1rem;
      }
    }
    .detail {
      margin-bottom: 1rem;
    }
    .fabu_time {
      padding-bottom: 1rem;
      font-size: 1.2rem;
      color: #bcbcbc;
    }
  }
}
</style>
